<template>
  <div class="wxapp">
    <div class="logo">
      <img src="../../../public/images/avatar.png" alt="" />
    </div>
    <div class="applist">
      <h3>{{ user.username }}请选择您要登入的微应用</h3>
      <div class="main">
        <template v-for="app in wxapplist">
          <div class="wxapp-item" :key="app.id" @click="selectApp(app)">
            <i class="icon el-icon-thumb"></i>
            {{ app.name }} &nbsp; (&nbsp;
            <strong>{{ app.typedata | dataType }}</strong>
            &nbsp;)
          </div>
        </template>
      </div>
      <div class="add">
        <i class="el-icon-plus"></i>
        <router-link :to="{ path: '/registered', query }"
          >添加微应用</router-link
        >
        <a href="#/dashboard" class="el-button el-button--primary">管理后台</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getWxapp } from "@/api/wx";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      wxapplist: [],
      redirect: undefined,
      otherQuery: {},
      query: undefined,
      user: {}
    };
  },
  computed: {
    ...mapGetters(["name", "avatar", "roles", "email", "token", "user_id"])
  },
  created() {
    this.getUser();
    this.wxapp();
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query;
        if (query) {
          this.query = query;
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions({
      setUserApp: "user/setUserApp"
    }),
    getUser() {
      this.user = {
        username: this.name,
        role: this.roles.join(" | "),
        email: this.email,
        avatar: this.avatar
      };
    },
    wxapp() {
      getWxapp(this.user.username).then(res => {
        this.wxapplist = res.data;
      });
    },
    selectApp(app) {
      this.$http.get("applet/setapplet/" + app.id).then(response => {
        this.setUserApp({ name: app.name, appid: response.data.appid });
        this.$router.push({
          path: this.redirect || "/dashboard",
          query: this.otherQuery
        });
      });
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    }
  },
  filters: {
    dataType(type) {
      let resType = null;
      switch (type) {
        case "serv_account":
          resType = "服务号";
          break;
        case "miniapp":
          resType = "小程序";
          break;
        case "sub_account":
          resType = "订阅号";
          break;
        case "work_account":
          resType = "企业微信";
          break;
        case "web":
          resType = "网站应用";
          break;
        case "app":
          resType = "移动应用";
          break;
        default:
          resType = "未知类型";
          break;
      }
      return resType;
    }
  }
};
</script>

<style lang="scss" scoped>
.wxapp {
  height: 100%;
  background: url("../../../public/images/gs.png");
  background: linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)),
    url("../../../public/images/gs.png");
  background-color: #eaeaea;
  padding: 0 30%;
  min-height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
  }
  .applist {
    flex: 1;
    text-align: center;
    padding: 20px 10px;
    background-color: white;
    margin-bottom: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    .main {
      flex: 1;
      .wxapp-item {
        text-align: left;
        border: 1px solid rgb(221, 221, 221);
        border-radius: 3px;
        padding: 10px 15px;
        font-size: 12px;
        cursor: pointer;
        transition: color 0.2s ease-in-out;
        .icon {
          transform: rotate(90deg);
        }
        &:hover {
          color: rgb(29, 171, 184);
        }
      }
    }
    .add {
      margin-top: 30px;
      cursor: pointer;
      transition: color 0.2s ease-in-out;
      &:hover {
        color: rgb(29, 171, 184);
      }
    }
  }
}
</style>
